<template>
    <el-row class="chooseApiLayout">
        <div class="chooseApiLayout_folder folder root" style="width: 25%;">
            <div class="folder-name isRoot">
                <div class="folder-title" style="left:10px">根目录</div>
                <div class="folderSetting isRoot" style="width: 40px;">
                    <div class="folderSettingItem" @click="refresh">
                        <i class="el-icon-refresh"></i>
                    </div>
                </div>
            </div>
            <div class="folderRoot">
                <div class="folder-list">
                    <folder v-for="item in tree.folderList" :key="item.id" :folderValue="item">
                        <template v-slot:default="slotProps">
                            <file :apiValue="slotProps.item" :class="{'active' : slotProps.item.id == activeId}" @click.native="active(slotProps.item)"></file>
                        </template>
                    </folder>
                </div>
                <div class="folder-api">
                    <file v-for="item in tree.apiList" :key="item.id" :class="{'active' : item.id == activeId}" :apiValue="item" @click.native="active(item)"></file>
                </div>
                <div class="empty" v-if="!tree.folderList.length && !tree.apiList.length">(空)</div>
            </div>
        </div>
        <div class="chooseApiLayout_api">
            <viewOtions ref="viewOtions" :setMarkdownForm="setMarkdownForm"></viewOtions>
        </div>
    </el-row>
</template>

<script>
import { mapState } from "vuex";
import file from "./chooseAPIFile";
import folder from "./chooseAPIFolder";
import viewOtions from './chooseAPIOption';

export default {
    props: ['setMarkdownForm'],
    components: {
        file,
        folder,
        viewOtions
    },
    data() {
        return {
            // style: {
            //     height: '550px'
            // },
            activeId: null,
            tree: {
                id: '',
                title: '',
                folderList: [],
                apiList: [],
            },
        }
    },
    mounted() {
        // this.style = {
        //     height: window.screen.height - 50 + 'px'
        // };
    },
    methods: {
        setTree(data) {
            this.tree = JSON.parse(JSON.stringify(data));
        },
        active(item) {
            this.activeId = item.id;
            this.$refs.viewOtions.setData(item);
        },
        refresh() {
            this.tree = JSON.parse(JSON.stringify(this.$store.state.Tree.tree));
        },
    },
}
</script>

<style>
    .chooseApiLayout {position: absolute; top: 70px; bottom: 40px; left: 20px; right: 0px;}
    .chooseApiLayout_folder { left: 0;}
    .chooseApiLayout_api { left: 25%; right: 20px; bottom: 0; top: 0; position: absolute;}

</style>